<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="isShow"
      width="400px"
      append-to-body
      destroy-on-close
      class="v-data-import--warp"
      @close="isShow = false">
      <div class="v-data-import">
        <slot name="before"></slot>
        <el-upload
          action=""
          class="v-data-import__upload"
          :multiple="false"
          :show-file-list="this.showFileList"
          :http-request="httpEquest">
          <el-button size="mini" type="primary">{{
            fileData ? '重新上传' : '点击上传'
          }}</el-button>
          <slot name="tip"></slot>
        </el-upload>
        <div v-if="fileData" class="v-data-import__file">
          <i class="el-icon-document"></i> {{ fileData.name }}
        </div>

        <slot></slot>
      </div>
      <div slot="footer" class="v-data-import__footer">
        <el-button
          v-if="template"
          type="primary"
          size="mini"
          @click="template"
          class="v-data-import__footer-template">
          <i class="el-icon-download"></i>
          模 板 下 载
        </el-button>
        <el-button
          type="primary"
          size="mini"
          :disabled="!fileData"
          @click="confirm"
          >确 定 导 入</el-button
        >
        <el-button size="mini" @click="isShow = false">取 消</el-button>
        <!-- <button @click="requstWs">点击发起websocket请求</button> -->
      </div>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="progressShow"
      width="30%"
      :before-close="handleClose">
      <el-result :icon="`${importResult.success}?'success':'error'`" title="提示" subTitle="请根据提示进行操作">
      <template slot="extra">
         <el-progress
          v-if="percentage > 0 && percentage < 100"
          type="circle"
          :stroke-width="20"
          :percentage="percentage"></el-progress>

        <el-button v-if="!importResult.success" type="primary" size="medium" @click="download(importResult.failureDownloadUrl)">点击下载</el-button>
      </template>
    </el-result>
      <span slot="footer" class="dialog-footer">
        <el-button @click="progressShow = false">取 消</el-button>
        <el-button type="primary" @click="progressShow = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { sendWebsocket, closeWebsocket } from '@/utils/websocket.js'
import { getTenantId } from '@/utils/auth'
export default {
  props: {
    title: {
      type: String,
      default: '数据导入'
    },
    width: {
      type: String,
      default: '500px'
    },
    showFileList: {
      type: Boolean,
      default: false
    },
    visible: {
      type: Boolean,
      default: false
    },
    upload: {
      type: Function,
      default: null
    },
    template: {
      type: Function,
      default: null
    }
  },
  computed: {
    isShow: {
      get() {
        return this.visible
      },
      set(val) {
        if (!val) {
          this.fileData = null
          this.percentage = 0
          this.percentageStatus = 'success'
        }
        this.$emit('update:visible', val)
      }
    }
  },
  data() {
    return {
      progressShow: false,
      fileData: null,
      percentage: 0,
      percentageStatus: 'success',
      importResult: {
        percent: 0,
        percentageStatus: 'success',
        completionStatus: false
      }
    }
  },
  created() {},
  mounted() {},
  beforeDestroy() {
    closeWebsocket()
  },
  methods: {
    download(url){

    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    // ws连接成功，后台返回的ws数据，组件要拿数据渲染页面等操作
    wsMessage(res) {

      console.log(res)
      this.importResult = res
      this.percentage = parseInt(res.percent)
      // 这里写拿到数据后的业务代码
    },
    // ws连接失败，组件要执行的代码
    wsError(e) {
      // 比如取消页面的loading
      console.log(e)
    },
    requstWs() {
      // 防止用户多次连续点击发起请求，所以要先关闭上次的ws请求。
      closeWebsocket()
      // 跟后端协商，需要什么参数数据给后台
      // 传送的数据

      // 发起ws请求
      sendWebsocket(
        getTenantId(),
        { percent: 0, completionStatus: false },
        this.wsMessage,
        this.wsError
      )
    },

    async confirm() {
      if (this.upload) {
        try {
          this.requstWs()
          let res = await this.upload(this.fileData, (progressEvent) => {
            this.percentage = parseInt(
              (progressEvent.loaded / progressEvent.total) * 100
            )
          })
          console.log(res, 'res')
          if (res.code === 0) {

            this.percentageStatus = 'success'
            this.isShow = false
            this.$modal.msgSuccess('文件导入成功,数据正在处理中,请耐心等待！')
             this.progressShow = true
            return
          }
        } catch (error) {
          console.log(error)
          this.percentageStatus = 'exception'
        }
      }
    },
    httpEquest({ file }) {
      this.percentage = 0
      this.fileData = file
    }
  }
}
</script>

<style lang="scss">
.v-data-import--warp {
  .el-dialog__header {
    padding: 10px 20px;
    font-size: 16px;
    .el-dialog__headerbtn {
      top: 10px;
    }
  }
  .el-dialog__body {
    padding: 10px 20px 10px;
  }
  .v-data-import {
    .v-data-import__upload {
      .el-upload {
        margin-bottom: 10px;
        width: 100%;
        .el-button {
          width: 100%;
        }
      }
    }
  }
  .v-data-import__footer-template {
    float: left;
  }
}
</style>
